<template>
	<a-layout-sider :class="['sider',  null , theme, 'ant-fixed-sidemenu' ]" width="256px" :collapsible="collapsible"
		v-model="collapsed" :trigger="null">
		
		<sp-logo :showTitle="showTitle"  :title= "title"></sp-logo>
		<sider-menu :menuList="menuList" :collapsed= "collapsed"  @select="onSelect" class="sider-menu"></sider-menu>
	</a-layout-sider>
</template>

<script>
	import SiderMenu from '@/components/Menu/index'
	import SpLogo from '@/components/Layouts/SpLogo'

	export default {
		name: "SpMenu",
		components: {
			SpLogo,
			SiderMenu
		},
		props: {
			mode: {
				type: String,
				default: 'sidemenu'
			},
			menuList: {
				type: Array,
				required: true
			},
			theme: {
				type: String,
				required: false,
				default: 'dark'
			},
			collapsed: {
				type: Boolean,
				required: false,
				default: false
			},
			openKeys: {
				type: Array,
				required: false,

			},
			collapsible: {
				type: Boolean,
				required: false,
				default: false
			},
			title: {
				type: String,
				default: 'SP-Admin',
				required: false
			},
			showTitle: {
				type: Boolean,
				default: true,
				required: false
			}
		},
		data() {
			return {
			

			}
		},
		created() {

		},
		mounted() {
		

		},
		computed: {

		},
		methods:{
			onSelect (obj) {
				this.$emit('select', obj)
			}
		}
	}
</script>

<style>

	.logo {
		height: 5vh;
	}

	.sider-menu {
		height: 95vh;
	}
</style>
